Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Better support for multiple themes #2792

Open
wants to merge 2 commits into
base: alpha
Choose a base branch
from

Conversation

xitij2000
Copy link
Contributor

@xitij2000 xitij2000 commented Nov 9, 2023

This change adds support for two CLI options to the build-tokens command.

The first, --all-themes makes the build-tokens command process all themes in the source directory as opposed to specifying all the names via --theme.

Secondly, --base-theme allows you to have multiple themes derived from the same common base. If specified, you can have a derived theme that still loads tokens from the light theme. For example, you can have a site theme called 'theme-one' and set the base theme to light so it will reuse the core light theme tokens and layer on changes from 'theme-one'.

Testing instructions:

  • Create a base tokens directory structure from which tokens will be loaded, this will involve creating an empty directory with a folder called 'themes' inside which there will be multiple folders, with names other than 'light' i.e. test1, test2. So you have folders called 'test1' and 'test2' inside '/tmp/pr-2792/themes/' for example.
  • Just for test purposes create some tokens in both directories. You can just create a file called `colors.json' with the following contents:
    {
        "color": {
            "test-color": {
                "value": "#112233"
            }
        }
    }
    You can use different color values or variable names to see if things are really working as expected.
  • You can now build tokens using ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1 --themes test2. You will need to specify both themes since currently, if you specify only one it will fail.
  • You should see build directory inside /tmp/pr-2792 that a core an themes directory where the themes directory in turn will have a variables.css file with the variable defined above, and utility-classes.css will be empty. Delete this directory.
  • Check out this branch and try the following:
    • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1: This would error before but will work now.
    • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --all-themes: This will build all themes without specifying a name.
    • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1 --base-theme light: This will compile the test1 theme using the light theme as a base. So utility-classes.css will not longer be empty but contain styles from the light theme.

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 9, 2023
@openedx-webhooks
Copy link

openedx-webhooks commented Nov 9, 2023

Thanks for the pull request, @xitij2000!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

  • If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
    • This process (including the steps you'll need to take) is documented here.
  • If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

  • Dependencies

    This PR must be merged before / after / at the same time as ...

  • Blockers

    This PR is waiting for OEP-1234 to be accepted.

  • Timeline information

    This PR must be merged by XX date because ...

  • Partner information

    This is for a course on edx.org.

  • Supporting documentation
  • Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/paragon-working-group. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

  • The size and impact of the changes that it introduces
  • The need for product review
  • Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

Copy link

netlify bot commented Nov 9, 2023

Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit fd4d634
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/65966f92f4a3dd0008de8fd2
😎 Deploy Preview https://deploy-preview-2792--paragon-openedx.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@xitij2000 xitij2000 marked this pull request as ready for review November 14, 2023 08:41
Copy link

codecov bot commented Nov 14, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ca2154e) 93.48% compared to head (fd4d634) 93.48%.

Additional details and impacted files
@@           Coverage Diff           @@
##            alpha    #2792   +/-   ##
=======================================
  Coverage   93.48%   93.48%           
=======================================
  Files         216      216           
  Lines        3671     3671           
  Branches      902      902           
=======================================
  Hits         3432     3432           
  Misses        234      234           
  Partials        5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@mphilbrick211 mphilbrick211 added the waiting for eng review PR is ready for review. Review and merge it, or suggest changes. label Nov 14, 2023
@mphilbrick211
Copy link

Hi @adamstankiewicz! Would you mind reviewing for us? Thanks!


if (allThemes) {
themesToProcess = fs
.readdirSync(`${tokensSource}/themes/`, { withFileTypes: true })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line fails for me locally when I triy to build all themes for Paragon, because tokensSource is undefined by default. I think this setting is used to overwrite default tokens which we don't need to do in Paragon, so we don't use this parameter internally in repository.

Changing this line to .readdirSync(`${tokensSource || path.resolve(__dirname, '../tokens/src')}}/themes/`, { withFileTypes: true }) seems to work for me (basically defaulting to the root folder of Paragon's tokens)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've applied your suggestion. Do tell if there are any other changed you'd like me to make to get this merged.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xitij2000 It seems we still have problems with the tokensSource. Could you check if everything is working correctly?

*/
async function buildTokensCommand(commandArgs) {
const defaultParams = {
themes: ['light'],
themes: 'light',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any specific reason to switch from themes argument as a list, to a string and splitting it later in :48 ?

If so, please also update the @param doc in :15 to reflect the same

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason is that currently specifying a single theme via --theme is simply broken. You will get an error if you run the command.

The reason for that is that if you specify a single theme as --theme light the value of themes above will be the string "light" and so the themes.forEach later on will fail. You'll need to either go with the default value, or specify themes twice as:

paragon build-tokens --themes light --themes dark

This change makes it possible to specify multiple themes as:

paragon build-tokens --themes "light dark"

This is also a bit clumsy, but is more consistent. I'll update the docstring and also make this more robust to support the old syntax.

This change adds support for two CLI options to the build-tokens
command.

The first, --all-themes makes the build-tokens command process all
themes in the source directory as opposed to specifying all the names
via --theme.

Secondly, --base-theme allows you to have multiple themes derived from
the same common base. If specified, you can have a derived theme that
still loads tokens from the light theme. For example, you can have a
site theme called 'theme-one' and set the base theme to light so it will
reuse the core light theme tokens and layer on changes from 'theme-one'.
@xitij2000 xitij2000 force-pushed the kshitij/cli-fixes branch 2 times, most recently from 8128b26 to e8d15d1 Compare January 4, 2024 08:41
@mphilbrick211
Copy link

Hi @brian-smith-tcril! Are you able to review / merge this for us?

Copy link
Contributor

@brian-smith-tcril brian-smith-tcril left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not fully sure how all these new options interact with each other:

--themes --base-theme --all-themes expected behavior
not set not set false ?
not set not set true ?
not set set false ?
not set set true ?
single theme not set false ?
single theme not set true ?
single theme set false ?
single theme set true ?
multiple themes not set false ?
multiple themes not set true ?
multiple themes set false ?
multiple themes set true ?

@xitij2000
Copy link
Contributor Author

Sure, I can clarify the interactions.

First, the --base-theme option:

This option is to allow creating theme variants. Currently, you can create your own light theme, Paragon will load the light theme tokens from the Paragon package, and overlay the branding version on top. However, if you use any other theme name, for example, "theme-a", then Paragon will try to load the corresponding theme-a tokens from Paragon and that won't work. We'd like the ability to have theme variants. For instance, if a site wants to support multiple light themes or have multiple themes for different microsites.

With the --base-theme option, you can tell paragon that all the themes being specified on the command line are to use that theme as the base theme. For instance, if you wanted to create a high-contrast version of the light theme, you could do:

paragon build-tokens --source ./tokens --build-dir ./paragon/css --source-tokens-only --themes high-contrast-light --base-theme light

Here it would pull the tokens from the high-contrast-light directory of the tokens folder but combine it with the light tokens from the Paragon package. This will apply to all themes supplied via this command line, whether via --theme or --all-themes.

Second, the interaction between themes and all-themes:

If --all-themes is supplied, then it will iterate over all the theme directories in the tokens path and ignore the themes option, since it overrides that. If the all-themes option is absent and themes is provided, then it will only process the themes specified via the themes option.

@mphilbrick211
Copy link

Sure, I can clarify the interactions.

First, the --base-theme option:

This option is to allow creating theme variants. Currently, you can create your own light theme, Paragon will load the light theme tokens from the Paragon package, and overlay the branding version on top. However, if you use any other theme name, for example, "theme-a", then Paragon will try to load the corresponding theme-a tokens from Paragon and that won't work. We'd like the ability to have theme variants. For instance, if a site wants to support multiple light themes or have multiple themes for different microsites.

With the --base-theme option, you can tell paragon that all the themes being specified on the command line are to use that theme as the base theme. For instance, if you wanted to create a high-contrast version of the light theme, you could do:

paragon build-tokens --source ./tokens --build-dir ./paragon/css --source-tokens-only --themes high-contrast-light --base-theme light

Here it would pull the tokens from the high-contrast-light directory of the tokens folder but combine it with the light tokens from the Paragon package. This will apply to all themes supplied via this command line, whether via --theme or --all-themes.

Second, the interaction between themes and all-themes:

If --all-themes is supplied, then it will iterate over all the theme directories in the tokens path and ignore the themes option, since it overrides that. If the all-themes option is absent and themes is provided, then it will only process the themes specified via the themes option.

Flagging this, @brian-smith-tcril, just in case you're still able to review.

@PKulkoRaccoonGang
Copy link
Contributor

PKulkoRaccoonGang commented May 10, 2024

@xitij2000 Thanks for your improvements! We need to solve the problem of specifying specific themes. I like the shorter declaration format you proposed and the flexibility we can provide to consumers.

Unfortunately, I was not able to test this locally (maybe I missed something). We may still have a problem with tokensSource.

@xitij2000
Copy link
Contributor Author

@xitij2000 Thanks for your improvements! We need to solve the problem of specifying specific themes. I like the shorter declaration format you proposed and the flexibility we can provide to consumers.

Unfortunately, I was not able to test this locally (maybe I missed something). We may still have a problem with tokensSource.

Could you tell me what didn't work when testing? Were you getting an error?

I've added test instructions in the PR description above. Do tell me if those steps do not work.

@mphilbrick211
Copy link

@xitij2000 @PKulkoRaccoonGang just following up on this :)

@mphilbrick211
Copy link

@xitij2000 @PKulkoRaccoonGang just following up on this :)

Friendly ping, @PKulkoRaccoonGang @xitij2000!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
open-source-contribution PR author is not from Axim or 2U waiting for eng review PR is ready for review. Review and merge it, or suggest changes.
Projects
Status: In Eng Review
Development

Successfully merging this pull request may close these issues.

7 participants